*{
    margin:0;
    padding:0;
    font-size: 0;
}
.wrapper{
    display: flex;
    width:100%;
    /* 是否超出换行 */
    flex-wrap: wrap;
}
.wrapper div{
    /* 剩余宽度项目平均分配 */
    flex-grow: 1;
    width:20%;
    display: inline-block;
}
.wrapper div img{
    width:100%;
}
@media screen and (max-width:1000px){
    .wrapper div{
        /* 四列，每列25% */
        width:25%;
    }
}
@media screen and (max-width:800px){
    .wrapper div{
        /* 三列，每列33.33% */
        width:33.33%;
    }
}
@media screen and (max-width:600px){
    .wrapper div{
        /* 两列，每列20% */
        width:50%;
    }
}
@media screen and (max-width:400px){
    .wrapper div{
        /* 一列，每列100% */
        width:100%;
    }
}